import React, { PropTypes, Component } from 'react'
import fetch from 'isomorphic-fetch'
import { Link } from 'react-router'

import Table from './Table'
import NavLink from './NavLink'
import style from './addStore.css'

import { myAjax, ROOTURL ,getAuthShop} from '../publicAPI/publicAPI'

class StoreM extends Component {

	constructor (props, context) {
	    super(props, context);
	    console.log("初始化");
		var url = ROOTURL + 'shop/search.api';
		var d = [];
		var _this = this;
		getAuthShop({
			"where": {"dd": [["eq",false]]}
		},function (data) {
			_this.setState({
				dataList: data
			})
		})
		

	    this.state = {
			delete: false,
			deleteId : -1,
			dataList : d
		} ;// 初始化状态
	}

	componentWillMount() {
		console.log("将安装")
	}

	componentDidMount() {
	    console.log("安装成功")
	}

	handleDelete(id){
		this.setState({
			delete: !this.state.delete,
			deleteId : id
		})
	}

	handleStoreDelete(){
		var url = ROOTURL + 'shop/instance.api?id='+this.state.deleteId;
		this.setState({
			delete: !this.state.delete
		});
		fetch(url, {
			method : 'delete',
			// mode : 'no-cors',
			body: JSON.stringify({})
		}).then(res=>{
			if(res.ok){
				res.json().then(data=>{
					location.href = '/StoreM'
				})
			}
		});
	}

	getMinute(hour) {
		var m = parseInt((hour - parseInt(parseInt(hour / 3600000) * 3600000)) / 60000);
		var fm = m + '';
		if (m < 10) {
			fm = "0" + m;
		}
		return fm;
	}

	getTime(tmOpen, tmClose){
		return (parseInt(tmOpen / 3600000) + ':' + this.getMinute(tmOpen) + '-' + parseInt(tmClose / 3600000) + ':' + this.getMinute(tmClose))
	}

	handleClick() {

		fetch('https://api.github.com/users/js', { 
		    method: 'GET', 
		    headers: { 
		      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 
		    }, 
			 // body: 'login=KingJch' 
			})
			.then(response => console.log(response)) 
			.then(function (data) { 
			    console.log('Request succeeded with JSON response', data); 
			}) 
			.catch(function (error) { 
			    console.log('Request failed', error); 
			});

		this.setState({page: this.state.page+1})
	}

	//render thead
	tHead() {
		var data = [
			{name: "id"},
			{name: "门店名"},
			{name: "客服电话"},
			{name: "营业时间"},
			{name: "操作"}
		];
		const _headArr = [];
		const _width = {
			"0" : "10%",
			"1" : "25%",
			"2" : "20%",
			"3" : "15%",
			"4" : "30%"
		};
		//_headArr.push(<th style={{width:'5%'}} role="1" key='' onClick={(e) => this.handleSelect(e)}></th>)
		_headArr.push(data.map((item, index) => <th style={{width: _width[index]}} role="1" key={index}>{item.name}</th>))
		return _headArr;
	}

	tBody() {

		return this.state.dataList.map(item => <tr key={item.id}>
			<td>{item.id}</td>
			<td>{item.dname}</td>
			<td>{item.meta? item.meta.phone : null}</td>
			<td>{item.tmOpen? this.getTime(item.tmOpen, item.tmClose) : null}</td>
			<td>
				<span><NavLink  to={`/StoreM/StoreEditor/${item.id}`} className="rbtn green">查看</NavLink></span>
				<span style={{marginLeft: "15px"}}><NavLink  to={`/SchedulingM/${item.id}`} className="rbtn green">排班</NavLink></span>
				<span style={{marginLeft: "15px"}}><NavLink  to={`/OrderM/${item.name}`} className="rbtn green">查看订单</NavLink></span>
				<span style={{marginLeft: "15px"}}><a  className="rbtn red" onClick={()=>this.handleDelete(item.id)}>删除</a></span>
			</td>
		</tr>)
	}
	
    render() {console.log("门店管理" + "渲染" + this.state.page);
		console.log(this.state)
	    return (
	    	<div className="right-wapper ">
				<div className="rt-wrap">
					<h2 className="catagory" onClick={() => this.handleClick()}>
						<span className="cata-title">门店管理</span>
						<Link to={`/StoreM/StoreEditor`}>
							<button className="add-btn" />
						</Link>
					</h2>

					<Table tHead={this.tHead.bind(this)()} tBody={this.tBody.bind(this)()} />
				</div>
				{ this.state.delete ?
					<div id={style.msgDialog}>
						<div className={style['msgDialog_div']}><h3 id={style['msgDialog_title']}>删除提示？</h3><p id={style['msgDialog_content']}>确认删除？</p>
							<div className={style['msgDialog_button']}>
								<button id={style['msgDialog_yes']} onClick={this.handleStoreDelete.bind(this)}>确定</button>
								<button id={style['msgDialog_no']} onClick={()=>this.setState({delete: !this.state.delete})}>取消</button>
							</div>
						</div>
					</div> : null}
	    	</div>
	    )
	  }
}

 export default StoreM
